<template>
  <div>
    <el-dialog :lock-scroll="false" :visible.sync="visibles" @close="close" :showClose="false" :closeOnClickModal="false" customClass="promptingLayer">
      <div class="promptingTop">
        <img src="../../../static/Notice_icon.png" />
        <p v-if="lookMessage.role==0">登录后可继续观看直播</p>
        <p v-if="lookMessage.role==1">当前仅开放<span>体验卡及其以上VIP</span>用户观看</p>
        <p v-if="lookMessage.role==3">当前仅开放<span>月卡及其以上VIP</span>用户观看</p>
        <p v-if="lookMessage.role==4">当前仅开放<span>季卡及其以上VIP</span>用户观看</p>
        <p v-if="lookMessage.role==5">当前仅开放<span>年卡</span>用户观看</p>
        <p v-if="lookMessage.role==2">当前仅开放<span>代理</span>观看</p>
        <p v-if="lookMessage.role==6">当前仅开放<span>转正体验卡及其以上VIP</span>用户观看</p>
        <a class="btn_left" v-if="lookMessage.is_login==false" @click="$refs.login.show(2)">登录</a>
        <a class="btn_left" v-if="lookMessage.is_login!=false" @click="gotoHere(Number(lookMessage.role))">{{roleList1[Number(lookMessage.role)]}}</a>
        <a class="btn_right" v-if="lookMessage.is_login==false" @click="gotoHeres(Number(lookMessage.role))">{{roleList[Number(lookMessage.role)]}}</a>
      </div>
      <div class="promptingBottom" v-if="!lookMessage.password">
        <a href="http://www.xilongfx.com" class="gotoHome">前往首页</a> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143329170&amp;site=qq&amp;menu=yes" class="qq" target="_blank">联系客服</a>
      </div>
      <div class="promptingBottom1" v-if="lookMessage.password">
        <p class="title">或使用以下方式进入</p>
        <p class="info">凭密码直接进入</p>
        <div><input type="password" v-model="Password" /><button class="promptingBtn" @click="passwordBtn">进入</button></div>
        <div class="promptingA">
          <a href="http://www.xilongfx.com" class="gotoHome">前往首页</a> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143329170&amp;site=qq&amp;menu=yes" class="qq" target="_blank">联系客服</a>
        </div>
      </div>
    </el-dialog>
    <v-login ref="login"></v-login>
  </div>
</template>
<script>
  import login from '../login/login.vue'
  export default {
    data () {
      return {
        visibles: false,
        Password: '',
        roleList: ['注册','开通熙隆VIP','申请代理','开通月卡','开通季卡','开通年卡','去转正'],
        roleList1: ['登录','开通熙隆VIP','申请代理','开通月卡','开通季卡','开通年卡','去转正']
      }
    },
    props: ['lookMessage'],
    methods: {
      close () {
        this.other = ''
        this.price = 0
      },
      passwordBtn () {
        if(this.Password=='') {
           return this.$message.error('密码不能为空');
        }
        this.$http.post('/index/purview/password',{password: this.Password})
          .then((res) => {
          let data = JSON.parse(res)
            if (data.type) {
              if (data.status == 2) {
//                this.$emit('fromChildMsg');
                window.location.reload();
              }else if (data.status == 3) {
                this.$message.error(data.msg)
              }
            }
          })
      },
      gotoHere (parameter) {
        switch (parameter) {
          case 0:
            this.$refs.login.show(2)
            break
          case 1:
          case 3:
          case 4:
          case 5:
            window.location.href = 'http://www.xilongfx.com/vipcard';
            break
          case 2:
            window.location.href = 'http://www.xilongfx.com/zsdl/';
            break
          case 6:
            window.location.href = 'http://www.xilongfx.com/prompt/';
            break
        }
      },
      gotoHeres (parameter) {
        switch (parameter) {
          case 0:
            this.$refs.login.show(0)
            break
          case 1:
          case 3:
          case 4:
          case 5:
            window.location.href = 'http://www.xilongfx.com/vipcard';
            break
          case 2:
            window.location.href = 'http://www.xilongfx.com/zsdl/';
            break
          case 6:
            window.location.href = 'http://www.xilongfx.com/prompt/';
            break
        }
      }
    },
    components: {
      'v-login': login
    }
  }
</script>
<style lang="scss">
  .promptingLayer {
    width: 390px;
    text-align: center;
    .el-dialog__header {
      padding: 0;
      .el-dialog__headerbtn {
        margin: 4px 8px 0 0;
      }
    }
    .el-dialog__body {
      padding: 30px 0px 10px;
      .promptingTop {
        img {
          width: 68px;
          height: 68px;
          margin-bottom: 16px;
        }
        p {
          font-size: 16px;
          color: #333;
          margin-bottom: 20px;
          span {
            color: #1968b1;
            font-weight: bold;
          }
        }
        a {
          display: inline-block;
          width: 140px;
          height: 38px;
          border-radius: 3px;
          border: solid 1px #1968b1;
          font-size: 16px;
          line-height: 38px;
          cursor: pointer;
          transition: all .2s linear;
        }
        .btn_left {
          background-color: #1968b1;
          color: #fff;
          &:hover {
            background-color: #2671b8;
          }
        }
        .btn_right {
          margin-left: 30px;
          background-color: #fff;
          color: #1968b1;
          &:hover {
            background-color: #1968b1;
            color: #fff;
          }
        }
      }
      .promptingBottom {
        padding-top: 10px;
        border-top: 1px solid #dddddd;
        margin-top: 25px;
        a {
          font-size: 12px;
          color: #858585;
        }
        .gotoHome {
          margin-right: 23px;
        }
      }
      .promptingBottom1 {
        width: 310px;
        margin:20px auto 0;
        .title {
          position: relative;
          color: #8a8a8a;
          font-size: 12px;
          margin-bottom: 10px;
          &:before,&:after {
            position: absolute;
            height: 1px;
            content: '';
            top: 12px;
            background: #ddd;
            width: 60px;
          }
          &:before {
            left: 0;
          }
          &:after {
            right: 0;
          }
        }
        .info {
          color: #5e5e5e;
          font-size: 14px;
          margin-bottom: 4px;
        }
        input {
          width: 230px;
          height: 35px;
          border-radius: 3px;
          border: solid 1px #dddddd;
          text-indent: 10px;
          color: #666;
        }
        .promptingBtn {
          width: 73px;
          height: 35px;
          background-color: #1968b1;
          border-radius: 3px;
          font-size: 16px;
          color: #fff;
          margin-left: 7px;
        }
        .promptingA {
          text-align: right;
          margin-top: 14px;
          a {
            font-size: 12px;
            color: #858585;
          }
          .gotoHome {
            margin-right: 13px;
          }
        }
      }
    }
  }
</style>
